<template>
	<view class="bag-page">
		<navgat :images="image" />
		<view class="main">
			<!-- tab -->
			<view class="tab">
				<view :class="tabIndex == index ? 'tab-item active' : 'tab-item'" v-for="(item, index) in tabList"
					:key="index" @click="tabClick(item, index)">
					{{ item.title }}
				</view>
			</view>
			<!-- 列表 -->
			<view class="list">
				<view class="tool">
					<view class="num">{{ num }}件饰品</view>
					<view class="shu"></view>
					<view class="price-sort" @click="priceSort">
						<view class="icon" :style="{ backgroundImage: 'url(' + sortImg[priceSortIndex].src + ')' }">
						</view>
						<view class="text">
							价格
						</view>
					</view>
					<view class="shu"></view>
					<view class="time-sort" @click="timeSort">
						<view class="icon" :style="{ backgroundImage: 'url(' + sortImg[timeSortIndex].src + ')' }">
						</view>
						<view class="text">
							时间
						</view>
					</view>
					<view class="search">
						<u--input style="width: 280rpx; height: 54rpx;textIndent:10rpx;" fontSize="12"
							placeholder="搜索指定饰品" border="none" v-model="searchText" suffixIcon="search"
							placeholderStyle="fontSize:26rpx; color:#adafca;textIndent:15rpx;"
							suffixIconStyle="color:#7463DB;"></u--input>
					</view>
				</view>
				<scroll-view class="list_boxc" scroll-y="true" @scrolltolower="loadMore" style="height: 1050rpx;">
					<view class="data_box">
						<view class="list_item" v-for="(item, index) in listData" :key="index"
							:class="{ active: selectedIndexList.includes(item.id) }" @click="itemClick(index)">
							<view class="imgBox" :style="{ backgroundImage: 'url(' + item.cover + ')' }">
								<!-- <view class="img" >
								</view> -->
								<view class="name">
									{{ item.name }}
								</view>
							</view>
							<view class="price">
								<view class="icon">

								</view>
								<view class="text">
									{{ item.bean }}
								</view>
							</view>
						</view>
					</view>
					<view v-if="isLoading" class="bottom-loading">加载中...</view>
					<view v-else-if="!hasMore" class="bottom-loading">没有更多了</view>
				</scroll-view>
			</view>
			<!-- footer -->
			<view class="footer">
				<view class="tool">
					<view class="selectAll">
						<view class="iconBox" @click="toggleAllSelect">
							<view :class="['icon', isAllSelect ? 'active' : '']"></view>
						</view>
						<view class="text">
							全选
						</view>
					</view>
					<view class="num">
						{{ currentNum }}/{{ num }}件
					</view>
					<view class="allMoney">
						<view class="icon">

						</view>
						<view class="text">
							{{ allMoney }}
						</view>
					</view>
				</view>
				<view v-if="tabIndex == 0" class="btn" @click="sellClick"
					:style="{ backgroundImage: 'url(https://img.jingkakeji.com/img/static/new_bag/btn_one.png)' }"></view>
				<view v-if="tabIndex == 1" class="btn" @click="extract"
					:style="{ backgroundImage: 'url(https://img.jingkakeji.com/img/static/new_bag/btn_two.png)' }"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get_storage,
		getExtract,
		getRecycle
	} from "../../api/outOfTheFree/index.js"
	import navgat from "../../Component/navgatsmy/navgatsmy.vue"
	import {
		playSound
	} from "../../utils/soundSettings.js"
	import {
		warn
	} from "vue"
	export default {
		data() {
			return {
				//返回图标
				image: "https://img.jingkakeji.com/img/static/backs.png",
				//tab项
				tabList: [{
					title: "分解",
					id: "1"
				}, {
					title: "提货",
					id: "2"
				}],
				//tab下标
				tabIndex: 0,
				//排序图标
				sortImg: [{
					id: 1,
					src: "https://img.jingkakeji.com/img/static/new_bag/in_order.png"
				}, {
					id: 2,
					src: "https://img.jingkakeji.com/img/static/new_bag/reverse_order.png"
				}],
				//搜索内容
				searchText: "",
				//价格排序
				priceSortIndex: 0,
				//时间排序
				timeSortIndex: 0,
				//饰品总数
				num: 0,
				//金币总量
				allMoney: 0,
				//是否全选
				isAllSelect: 0,
				//数据
				listData: [],
				// 当前页
				currentPage: 1,
				// 是否还有更多
				hasMore: true,
				//loading状态
				isLoading: false,
				//选中的数据
				selectedIndexList: []
			}
		},
		mounted() {
			this.getData()
		},
		components: {
			navgat
		},
		watch: {
			searchText() {
				this.currentPage = 1
				this.getData(1)
			}
		},
		computed: {
			currentNum() {
				return this.selectedIndexList.length
			}
		},
		methods: {
			//Tab切换
			tabClick(item, index) {
				playSound("https://img.jingkakeji.com/img/static/music/click.mp3")
				this.tabIndex = index
			},
			// 价格排序
			priceSort() {
				this.priceSortIndex = this.priceSortIndex === 0 ? 1 : 0;
			},
			//时间排序
			timeSort() {
				this.timeSortIndex = this.timeSortIndex === 0 ? 1 : 0
			},
			//全选
			toggleAllSelect() {
				this.isAllSelect = this.isAllSelect ? 0 : 1;
			},
			// 获取数据
			async getData(page = 1) {
				let params = {
					page
				}
				if (this.searchText) {
					params.name = this.searchText
				}
				let res = await get_storage(params)
				if (res.code == 200) {
					if (page === 1) {
						this.listData = res.data.data
					} else {
						this.listData = this.listData.concat(res.data.data)
					}
					this.hasMore = res.data && res.data.data && res.data.data.length > 0
					this.num = res.data.total
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1000
					})
				}
			},
			//加载更多
			async loadMore() {
				if (!this.hasMore || this.isLoading) return
				this.isLoading = true
				this.currentPage += 1
				await this.getData(this.currentPage)
				this.isLoading = false
			},
			//选择
			itemClick(index) {
				const id = this.listData[index].id
				const i = this.selectedIndexList.indexOf(id)
				if (i > -1) {
					this.selectedIndexList.splice(i, 1)
				} else {
					this.selectedIndexList.push(id)
				}
			},
			//全选
			toggleAllSelect() {
				console.log(this.listData);
				this.isAllSelect = this.isAllSelect ? 0 : 1
				if (this.isAllSelect) {
					this.selectedIndexList = this.listData.map(item => item.id)
				} else {
					this.selectedIndexList = []
				}
			}, // 价格排序
			priceSort() {
				this.priceSortIndex = this.priceSortIndex === 0 ? 1 : 0;
				this.sortListByPrice();
			},
			sortListByPrice() {
				this.listData.sort((a, b) => {
					const p1 = parseFloat(a.bean);
					const p2 = parseFloat(b.bean);
					return this.priceSortIndex === 1 ? p1 - p2 : p2 - p1;
				});
			},
			//时间排序
			timeSort() {
				this.timeSortIndex = this.timeSortIndex === 0 ? 1 : 0;
				this.sortListByTime();
			},
			sortListByTime() {
				this.listData.sort((a, b) => {
					const t1 = new Date(a.created_at).getTime();
					const t2 = new Date(b.created_at).getTime();
					return this.timeSortIndex === 1 ? t1 - t2 : t2 - t1;
				});
			},
			// 分解饰品
			async sellClick() {
				if (this.selectedIndexList.length === 0) {
					uni.showToast({
						title: '请先选择要分解的饰品',
						duration: 1000,
						icon: "none"
					})
					return
				}
				try {
					let data = this.selectedIndexList
					let res = await getRecycle({
						data
					})
					if (res && res.code == 200) {
						uni.showToast({
							title: res.message,
							duration: 1000,
							icon: "none"
						})
						playSound('https://img.jingkakeji.com/img/static/music/succeed_money.mp3')
						this.getData()
						this.selectedIndexList = []
						this.isAllSelect = 0
					} else {
						uni.showToast({
							title: (res && res.message),
							duration: 1000,
							icon: "none"
						})
					}
				} catch (e) {
					uni.showToast({
						title: '网络错误，请稍后重试',
						duration: 1000,
						icon: "none"
					})
				}
			},
			//提取饰品
			async extract() {
				if (this.selectedIndexList.length === 0) {
					uni.showToast({
						title: '请先选择要提取的饰品',
						duration: 1000,
						icon: "none"
					})
					return
				}
				try {
					let data = this.selectedIndexList
					let res = await getExtract({
						data
					})
					if (res && res.code == 200) {
						uni.showToast({
							title: res.message,
							duration: 1000,
							icon: "none"
						})
						this.getData()
						this.selectedIndexList = []
						this.isAllSelect = 0
					} else {
						uni.showToast({
							title: (res && res.message),
							duration: 1000,
							icon: "none"
						})
					}
				} catch (e) {
					uni.showToast({
						title: '网络错误，请稍后重试',
						duration: 1000,
						icon: "none"
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.bag-page {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-color: #DAD8EE;
		display: flex;
		flex-direction: column;

		.main {
			width: 100%;
			// height: calc(100% - 190rpx);
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.tab {
				width: 95%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.tab-item {
					width: 340rpx;
					height: 90rpx;
					text-align: center;
					line-height: 90rpx;
					color: white;
					font-size: 24rpx;
					background-image: url("https://img.jingkakeji.com/img/static/new_bag/tab_item.png");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}

				.active {
					background-image: url("https://img.jingkakeji.com/img/static/new_bag/tab_item_active.png");
				}
			}

			.list {
				width: 95%;
				height: 1230rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				background-image: url("https://img.jingkakeji.com/img/static/new_bag/list_bg.png");
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;

				.tool {
					width: 95%;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.num {
						font-size: 26rpx;
						color: #31296A;
					}

					.shu {
						width: 2rpx;
						height: 40rpx;
						background-color: #D1D3F5;
					}

					.price-sort {
						width: 100rpx;
						display: flex;
						align-items: center;
						justify-content: space-evenly;

						.icon {
							width: 40rpx;
							height: 40rpx;
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;

						}

						.text {
							font-size: 30rpx;
							color: #31296A;
						}

					}

					.time-sort {
						width: 100rpx;
						display: flex;
						align-items: center;
						justify-content: space-evenly;

						.icon {
							width: 40rpx;
							height: 40rpx;
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;

						}

						.text {
							font-size: 30rpx;
							color: #31296A;
						}
					}

					.search {
						width: 280rpx;
						height: 54rpx;
						border: 1px solid #7463DB;
					}

				}

				.list_boxc {
					width: 95%;
					height: 1050rpx;
					overflow-y: scroll;

					.data_box {
						width: 100%;
						height: auto;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.list_item {
							width: 220rpx;
							height: 220rpx;
							margin-bottom: 50rpx;
							background-image: url("https://img.jingkakeji.com/img/static/new_bag/list_item.png");
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
							display: flex;
							flex-direction: column;
							align-items: center;

							.imgBox {
								width: 90%;
								height: 120rpx;
								background-size: contain;
								background-position: center;
								background-repeat: no-repeat;
								margin-top: 10rpx;
							}

							.name {
								width: 100%;
								font-size: 24rpx;
								color: #31296A;
								margin-top: 120rpx;
								white-space: nowrap;
								text-indent: 10rpx;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.price {
								width: 90%;
								height: 50rpx;
								margin-top: 38rpx;
								display: flex;
								align-items: center;
								justify-content: center;

								.icon {
									width: 25rpx;
									height: 25rpx;
									background-image: url("https://img.jingkakeji.com/img/static/new_bag/money.png");
									background-size: cover;
									background-position: center;
									background-repeat: no-repeat;
								}

								.text {
									font-size: 24rpx;
									color: #FBDC3B;
									margin-left: 10rpx;
								}
							}
						}

						.active {
							background-image: url("https://img.jingkakeji.com/img/static/new_bag/list_item_active.png");
						}
					}

					.bottom-loading {
						width: 100%;
						text-align: center;
						color: #999;
						font-size: 26rpx;
						padding: 20rpx 0;
					}
				}

			}

			.footer {
				width: 100%;
				height: 140rpx;
				background-image: url("https://img.jingkakeji.com/img/static/new_bag/footer_bg.png");
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tool {
					width: 350rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 40rpx;

					.selectAll {
						display: flex;
						align-items: center;

						.iconBox {
							width: 30rpx;
							height: 30rpx;
							background-image: url("https://img.jingkakeji.com/img/static/new_bag/select_box.png");
							background-size: cover;
							background-position: center;
							background-repeat: no-repeat;
							display: flex;
							align-items: center;
							justify-content: center;

							.icon {
								width: 25rpx;
								height: 25rpx;
								background-size: cover;
								background-position: center;
								background-repeat: no-repeat;
							}

							.active {
								background-image: url("https://img.jingkakeji.com/img/static/new_bag/all_select.png");
							}
						}

						.text {
							margin-left: 10rpx;
							font-size: 30rpx;
							color: white;
						}
					}

					.num {
						font-size: 30rpx;
						color: white;
					}

					.allMoney {
						display: flex;
						align-items: center;

						.icon {
							width: 30rpx;
							height: 30rpx;
							background-image: url("https://img.jingkakeji.com/img/static/new_bag/money.png");
							background-size: cover;
							background-position: center;
							background-repeat: no-repeat;
						}

						.text {
							margin-left: 10rpx;
							font-size: 30rpx;
							color: white;
						}
					}
				}

				.btn {
					width: 300rpx;
					height: 100rpx;
					margin-right: 20rpx;
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
				}
			}
		}
	}
</style>